<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {PaginationProps} from "@arco-design/web-vue";
import {allDataStore} from "../../../stores/data.ts";

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 180,
    fixed: 'left'
  },
  {
    title: '标题',
    dataIndex: 'title',
    fixed: 'left',
    width: 120
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 120
  },
  {
    title: '点赞数',
    dataIndex: 'thumbNum',
    width: 120
  },
  {
    title: '阅览数',
    dataIndex: 'viewNum',
    width: 120
  },
  {
    title: '创建用户id',
    dataIndex: 'userId',
    width: 180,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 120
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 120
  }, {
    title: '标签列表',
    dataIndex: 'tagList',
    width: 280
  },{
    title: '创建人信息',
    dataIndex: 'user',
    width: 200
  }
];
const dataStore = allDataStore();
const pagination: PaginationProps = reactive({
  total: computed(() => dataStore.postRes.total),
  pageSize: computed(() => dataStore.postRes.size),
  current: computed(() => dataStore.postRes.current)
})
const posts = computed(() => dataStore.postRes.records);
const isLoading = ref(false)
const handleChange = async (page) => {
  isLoading.value = true
  await dataStore.getPosts(page, pagination.pageSize)
  isLoading.value = false
}
// onMounted(() => {
//   getPosts(pagination.current, pagination.pageSize)
// })
</script>

<template>
  <div id="admin-post">
    <a-button class="ml-2 mb-2" status="success" @click="update">
      <icon-plus/> 新增
    </a-button>
    <a-table :scroll="{x: 2000,y: '100%'}"
             :data="posts"
             :filter-icon-align-left="true"
             @change="handleChange"
             table-layout-fixed
             :row-selection="{type: 'checkbox',showCheckedAll: true}"
             :pagination="pagination"
             stripe
             :loading="isLoading"
    >
      <template #columns>
        <a-table-column v-for="col in columns"
                        :title="col.title"
                        :data-index="col.dataIndex"
                        :width="col?.width"
                        :ellipsis="true"
                        :tooltip="true"
                        :fixed="col?.fixed"
        ></a-table-column>
        <a-table-column fixed="right" :width="200" title="操作">
          <template #cell="{ record }">
            <a-button class="ml-2 mr-8" status="success" @click="$modal.info({ title:'Name', content:record.name })">编辑</a-button>
            <a-button status="danger" @click="$modal.info({ title:'Name', content:record.name })">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
#admin-post {
  height: 88vh;
}
</style>